<template>
  <div class="tabs">
    <RouterView />
    <van-sticky position="bottom">
      <VanTabbar v-model="active">
        <VanTabbarItem name="home">
          <span class="textSize">{{ $t('tab.home') }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.home : icon.inactiveHome" />
          </template>
        </VanTabbarItem>
        <VanTabbarItem name="type">
          <span class="type">{{ $t('tab.cate') }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.type : icon.inactiveType" />
          </template>
        </VanTabbarItem>
        <VanTabbarItem name="cart">
          <span class="textSize">{{ $t('tab.cart') }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.cart : icon.inactiveCart" />
          </template>
        </VanTabbarItem>
        <VanTabbarItem name="chat">
          <span class="textSize">{{ $t('tab.server') }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.chat : icon.inactiveChat" />
          </template>
        </VanTabbarItem>
        <VanTabbarItem name="me">
          <span class="textSize">{{ $t('tab.my') }}</span>
          <template #icon="props">  
            <img :src="props.active ? icon.my : icon.inactiveMy" />
          </template>
        </VanTabbarItem>
      </VanTabbar>
    </van-sticky>
  </div>
</template>

<script setup lang="ts" name="TabsView">
import { RouterView, useRoute, useRouter } from "vue-router";
import axios from "axios";
import { ref, watch,computed,onMounted } from "vue";

const icon = {
  home: "https://cdn7.axureshop.com/demo/1992135/images/%E9%A6%96%E9%A1%B5/u1077.svg",
  inactiveHome:
    "https://cdn7.axureshop.com/demo/1992135/images/%E5%88%86%E7%B1%BB/u3977.svg",
  type: "https://bpic.588ku.com/element_origin_min_pic/19/06/15/33408c2a6f2525305a607afaeac2aa3d.jpg",
  inactiveType: "https://img1.baidu.com/it/u=1403249574,2400786990&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  cart: "https://cdn7.axureshop.com/demo/1992135/images/%E8%B4%AD%E7%89%A9%E8%BD%A6-%E6%9C%AA%E7%99%BB%E5%BD%95/u4592.svg",
  
  inactiveCart:
    "https://cdn7.axureshop.com/demo/1992135/images/%E9%A6%96%E9%A1%B5/u1064.svg",
  chat: "https://img1.baidu.com/it/u=2957597787,2192012647&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  inactiveChat:
    "https://p2.itc.cn/images01/20201012/63f3c1173b144719904681d791c27ad9.jpeg",
  my: "https://img0.baidu.com/it/u=659730249,1044385425&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  inactiveMy:
    "https://bpic.588ku.com/element_origin_min_pic/01/36/76/32573c279fb0158.jpg",
};

const route = useRoute();
const router = useRouter();

let active = ref(route.name);

watch(active, (val) => {
  if (active.value == "me") {
    window.location.href = "/me";
  } else {
    router.push({
      name: val,
    });
  }
});

console.log(active.value);

const shop = ref([])
const getShop = async () => {
  const { data } = await axios.get('http://localhost:3000/shop')
  shop.value = data.shop 
}
onMounted(() => {
  getShop()
})
// 对去下单总数进行计算
const totalSelectedCount = computed(() => {
  return shop.value.reduce((total, item) => total + item.num, 0);
});
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
}

.textSize {
  font-size: .7369rem;
}
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red; /* 设置背景颜色 */
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
</style>
